<template>
  <div class="container">
    <p class="font18 color333 bolder mb30">等待</p>
    <el-form :model="waitForm" size="mini" ref="waitForm" :rules="waitRules" :inline="true">
      <el-row>
      <el-form-item prop="waitType" required class="noMarginBottom">
        <el-radio-group v-model="waitForm.waitType" style="float: left">
          <el-radio :label="1"  border class="mr60">立即触发</el-radio>
          <el-radio :label="2"  border>等待触发</el-radio>
        </el-radio-group>
      </el-form-item>
      </el-row>
      <el-form-item v-show="waitForm.waitType == 1" class="w100 noMarginBottom mt10">
        <div style="color: #FFBF5E;float: left" class="font12">执行动作结束后立即自动触发</div>
      </el-form-item>
      <el-row v-if="waitForm.waitType == 2" class="w100">
           <el-form-item label="等待时间：" prop="waitTime" class="wid noMargin mt30" required>
             <el-input
              placeholder="输入等待时间"
              v-model="waitForm.waitTime"
              maxlength="5"
              clearable
              class="w250"
            ></el-input>
           </el-form-item>
          <el-form-item prop="waitPeriod" class="noMargin mt30">
            <el-select v-model="waitForm.waitPeriod" placeholder="请选择周期" size="mini" >
              <el-option
                v-for="item in waitPeriodOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
      </el-row>
    </el-form>
    <div class="save t_c mt40">
      <el-button class="cancelButton mr60" @click="handleClose">取消</el-button>
      <el-button class="searchButton " @click="confirm">确认</el-button>
    </div>
  </div>
</template>

<script>
// 自动化营销-----等待组件
export default {
  name: "wait",
  components: {},
  props: {
    nodeInfo: {
      type: Object
    },
    journeyId: {
      type: String,
      default: ""
    }
  },
  data() {
    var checkWaitTime = (rule, value, callback) => {
      if (this.waitForm.waitType == 2) {
        if (!value) {
          callback(new Error("请输入等待时间"));
        } else if (!/^[1-9]+[0-9]*$/.test(value)) {
          callback(new Error("请输入正整数"));
        }else {
          callback();
        }
      } else {
        callback();
      }
    };
    return {
      tripStartTime: null,
      tripEndTime: null,
      waitForm: {
        waitType: 1,
        waitTime: null,
        waitPeriod: 1
      },
      waitRules: {
        waitTime: [
          { validator: checkWaitTime, trigger: "blur" },
          { validator: checkWaitTime, trigger: "change" }
        ]
      },
      waitPeriodOptions: [
        { value: 1, label: "分钟" },
        { value: 2, label: "小时" },
        { value: 3, label: "天" },
        { value: 4, label: "周" },
        { value: 5, label: "月" }
      ],
      showWaitType1: true,
      showWaitType2: false,
      // 保存弹框
      saveDlg: false
    };
  },

  methods: {
    //确认按钮
    confirm() {
      let this_ = this;
      this.$refs.waitForm.validate((valid) => {
        if (valid) {
          // 旅程开始时间为空，不校验
          if (
            this_.tripStartTime != null &&
            this_.tripEndTime != null &&
            this_.waitForm.waitType == 2
          ) {
            let waitDate = null;
            if (1 == this_.waitForm.waitPeriod) {
              //分钟
              waitDate =
                new Date(this_.tripStartTime).getTime() +
                this_.waitForm.waitTime * 60 * 1000;
            } else if (2 == this_.waitForm.waitPeriod) {
              //小时
              waitDate =
                new Date(this_.tripStartTime).getTime() +
                this_.waitForm.waitTime * 60 * 1000 * 60;
            } else if (3 == this_.waitForm.waitPeriod) {
              //天
              waitDate =
                new Date(this_.tripStartTime).getTime() +
                this_.waitForm.waitTime * 60 * 1000 * 60 * 24;
            } else if (4 == this_.waitForm.waitPeriod) {
              //周
              waitDate =
                new Date(this_.tripStartTime).getTime() +
                this_.waitForm.waitTime * 60 * 1000 * 60 * 24 * 7;
            } else if (5 == this_.waitForm.waitPeriod) {
              //月
              waitDate =
                new Date(this_.tripStartTime).getTime() +
                this_.waitForm.waitTime * 60 * 1000 * 60 * 24 * 30;
            }
            if (waitDate >= new Date(this_.tripEndTime).getTime()) {
              this_.$message({
                message: "等待执行时间超过了旅程结束时间!",
                type: "error"
              });
              return;
            }
          }
          this_.save();
        }
      });
    },

    save() {
      //保存数据
      let this_ = this;
      let params = {};
      params.id = this.nodeInfo.nodeId;
      params.nodeVariable = JSON.stringify(this_.waitForm);
      this_.utils.request.updateBranchNode(params, function(res) {
        if (res.code == "0000") {
          this_.saveDlg = false;
          this_.handleClose();;//关闭弹窗
          this_.saveLabelData();//回显数据
          this_.$message({ message: "操作成功", type: "success" });
        } else {
          this_.$message({ message: "操作失败, " + res.msg, type: "error" });
        }
      });
    },
    //取消按钮
    handleClose() {
      this.$emit("handleClose");
    },

    //回显
    saveLabelData(){
      let nodeName = null;
      let waitPeriodName = "";
      if(this.waitForm.waitType == 1){
        nodeName = "立即触发";
      }else if(this.waitForm.waitType == 2 && this.waitForm.waitTime != null){
        if(this.waitForm.waitPeriod == 1){
          waitPeriodName = "分钟";
        }else if(this.waitForm.waitPeriod == 2){
          waitPeriodName = "小时";
        }else if(this.waitForm.waitPeriod == 3){
          waitPeriodName = "天";
        }else if(this.waitForm.waitPeriod == 4){
          waitPeriodName = "周";
        }else if(this.waitForm.waitPeriod == 5) {
          waitPeriodName = "月";
        }
        nodeName = this.waitForm.waitTime + waitPeriodName;
      }
      this.$emit("saveLabelData", {nodeName: nodeName});
    },

    //初始化
    getBranchNodeDetail: function() {
      let this_ = this;
      let param = {};
      param.branchNodeId = this_.nodeInfo.nodeId;
      this.utils.request.getBranchNodeDetail(param, function(res) {
        if (res.code == "0000") {
          if (res.data.nodeVariable != null) {
            JSON.parse(res.data.nodeVariable, function(key, value) {
              if (key == "waitType" && value != null) {
                this_.waitForm.waitType = value;
              }
              if (key == "waitTime" && value != null) {
                this_.waitForm.waitTime = value;
              }
              if (key == "waitPeriod" && value != null) {
                this_.waitForm.waitPeriod = value;
              }
            });
          }
        } else {
        }
      });
    },

    //获取旅程详情
    getTripDetailAndNodeList() {
      let this_ = this;
      let callback = function(res) {
        if (res.code == "0000") {
          //固定时间
          if (res.data.timeType == 1) {
            this_.tripStartTime = res.data.startTime;
            this_.tripEndTime = res.data.endTime;
          }
        }
      };
      let param = { tripId: this.journeyId };
      this.utils.request.getTripDetailAndNodeList(param, callback);
    }
  },
  created() {
  },
  mounted() {
    this.getBranchNodeDetail();
    this.getTripDetailAndNodeList();
  }
};
</script>
<style lang="scss" scoped>
  .font18{
    font-size:18px
  }
  .bolder{
    font-weight: 500;
  }
  .mr60{
    margin-right: 60px !important;
  }
  .font12{
    font-size: 12px !important;
  }
  .mt40{
    margin-top: 40px;
  }
/deep/  .w250{
  width:125px !important;
  .el-input__inner{
  width: 125px !important;
  }
  }
  // // /deep/ .el-form--inline {
  // //   .el-form-item{
  // //   margin-right: 0 !important;
  // // }
  // }
  /deep/.noMargin{
    margin-right: 0 !important;
    .el-form-item__content{
      margin-right: 10px !important;
    }
  }
  
  .noMarginBottom{
    margin-bottom: 0 !important;
  }
  .mb10{
    margin-bottom: 10px !important;
  }
  .mt10{
    margin-top: 10px !important;
  }
  .mt30{
    margin-top: 30px !important;
  }
</style>

